import React, { useEffect, useState } from 'react'
import {
  Popover, Button, Modal, Form, Input, message,
  Row,
  Col,
  Card,
  Space,
  InputNumber,
  Collapse,
  Tag,
  Tabs
} from 'antd';
import { UserOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import PatientHeadDetails from "../components/PatientHeadDetails"
import "./index.less"
const { TextArea } = Input;

export default function AccountingNotice() {

  const [form] = Form.useForm();

  const onFinish = () => {
    message.success('Submit success!');
  };

  const onFinishFailed = () => {
    message.error('Submit failed!');
  };
  const onTreatmentConfirmDelete = () => {
    Modal.confirm({
      // title: 'Confirm',
      icon: <ExclamationCircleOutlined />,
      content: '削除しますか?',
      okText: 'はい',
      cancelText: 'いいえ',
    });
  };
  const onMoneyConfirmDelete = () => {
    Modal.confirm({
      // title: 'Confirm',
      icon: <ExclamationCircleOutlined />,
      content: '請求内容を取消しますか?',
      okText: 'はい',
      cancelText: 'いいえ',
    });
  };



  return (
    <div className='Patient-information  accountingNotice'>
      <PatientHeadDetails />
      <div className='accountingNotice-content-box' >

        <div className='accountingNotice-content1'>
          <div className="card-box">
            {
              [1, 2, 3, 4,].map((item) => (
                <Card size="small" title="2021/11/22(月)"
                  extra={<a href="#">x</a>}
                  className={"Card"}
                >
                  <div>{"内科"}</div>
                  <Tag> {"完了"}</Tag>

                </Card>
              ))
            }

          </div>




        </div>

        <div className='accountingNotice-content2'>
          <div>
            <span>
              {"2021/12/1(水) "}
            </span>
            <Tag>内科 </Tag>
            <span className='information-content2-btn'>
              <Button>保存</Button>
            </span>

          </div>
          <div className='observe-details'>
            <div className='treatment-details'>
              <h3>医疗明细</h3>
              <div className='treatment-content'>

              </div>
              <div className='treatment-details-btn'>
                <Popover content={<div>
                  <p>√珍療費請求書兼領收書</p>
                  <p>√ 珍療明細書</p>
                  <p>√ お薬の説明書</p>
                  <p>を1フアイルにまとめてアップロ-ドしてください。</p>
                </div>} >
                  <Button type="primary">フアイルアップロ-ド</Button>
                </Popover>
                <Button onClick={onTreatmentConfirmDelete} >
                  削除
                </Button>
              </div>

            </div>
            <div className='request-money'>
              <h3>請求金額</h3>
              <Space direction="vertical">
                {
                  ["診察料", "送料", "アプリ利用erefefefefsffd料"].map((item) => {
                    return <div className='money-box'>
                      <div className='money-list-table' style={{}}>{item}</div>
                      <InputNumber style={{ width: 120 }} size="small" addonAfter="円" defaultValue={100} />

                    </div>

                  })
                }

              </Space>
              <Button className='request-money-btn' onClick={onMoneyConfirmDelete}>
                決済取消
              </Button>

            </div>
            <div className='observe-details-prescription'>
              <h3>处方·配送</h3>
              <p>
                <span>処方種別</span>
                <Tag.CheckableTag>院内</Tag.CheckableTag>
                <Tag.CheckableTag>院外</Tag.CheckableTag>
                <Tag.CheckableTag>なし</Tag.CheckableTag>
              </p>
              <p>
                <span>配送方法</span>
                <Tag.CheckableTag>CBクラクド</Tag.CheckableTag>
                <Tag.CheckableTag>ャマト</Tag.CheckableTag>
                <Tag.CheckableTag>邮送 なし</Tag.CheckableTag>
              </p>
              <div className='observe-details-prescription-foot'>
                <h3>お届け先情報</h3>
                <p className='intelligence-details'>
                  7105-0014
                  東京都港区芝1丁目12-13ルボマンション1003佐藤 健一様
                  TEL 090-1234-5678
                </p>
              </div>
              <Button className='intelligence-details-btn'>观察取消</Button>
            </div>

          </div>


        </div>

      </div>

    </div>
  )
}
